<template>
	<view class="serve-detail-wrapper">
		<view class="" style="
        position: fixed;
        top: 0;
        width: 100%;
        background: #f8f8f8;
        z-index: 99;
      ">
			<custom-nav title="项目详情"></custom-nav>

			<view class="serv-det-header" v-if="details">
				<image :src="$BASE_URL + details.service_banner"></image>
			</view>
			<view class="serve-detail-info">
				<view class="detail-info-list flex-between">
					<view class="serve-item">
						<view class="price-num-box s-flex-r-b-c">
							<view class="price-box s-flex-r-s-c">
								<text class="price">{{details.price}}</text>
								<text class="pro">服务费</text>
							</view>
							<view class="num-box s-flex-r-s-c">
								<view class="person-avatar s-flex-r-s-c">
									<image class="avatar avatar1" style="z-index: 3;" src="/static/img/avatar/641.jpg"></image>
									<image class="avatar avatar1" style="z-index: 2;" src="/static/img/avatar/642.jpg"></image>
									<image class="avatar" src="/static/img/avatar/640.jpg"></image>
									<up-icon class="avatar2" name="more-circle" color="#DBDBDB" size="24"></up-icon>
								</view>
								<view class="person-num s-flex-r-s-c">
									<text>{{details.people_num}}</text>
									<text class="pro">人已预约</text>
								</view>
							</view>
						</view>
						<view class="item-tit">{{details.service_name}}</view>
						<view class="detail-item s-flex-r-s-c">
							<text class="detail-val">办理周期</text>
							<text class="detail-label">9-12个月</text>
						</view>
						<view class="detail-item s-flex-r-s-c">
							<text class="detail-val">签证类型</text>
							<text class="detail-label">临时居民</text>
						</view>
						<view class="detail-item s-flex-r-s-c">
							<text class="detail-val">免签国家</text>
							<text class="detail-label">166个</text>
						</view>
						<view class="detail-item s-flex-r-s-c">
							<text class="detail-val">居住要求</text>
							<text class="detail-label">以香港为家</text>
						</view>

					</view>
				</view>
			</view>
			<view class="tab">
				<view class="" v-for="(v, i) in details.content" :key="i"
					:class="[toView == 'xmjs'+v.id ? 'active' : 'name']" @click="scrollToAnchor('xmjs'+v.id)">
					{{ v.title }}
				</view>
			</view>
		</view>
		<view class="" style="height: 960rpx;"></view>
		<scroll-view scroll-y="true" style="height:30vh" :scroll-into-view="toView" scroll-with-animation="true">
			<view class="serv-content">
				<view class="serve-item" :id="'xmjs'+v.id" v-for="(v, i) in details.content" :key="i">
					<view class="serve-item-header">
						<text class="head-b"></text>
						<text class="item-tit" :id="v.title">{{ v.title }}</text>
					</view>
					<view class="serve-info" v-html="v.value"></view>
				</view>
			</view>
		</scroll-view>
		<view class="apply-btn-wrapper">
			<view class="share">
				<button open-type="share" plain="true" @click="onShareAppMessage">
					<image src="/static/img/index/share.png" style="width: 32rpx" mode="widthFix"></image>
					分享
				</button>
			</view>
			<view class="apply-btn" @click="handleNext">
				<text>申请</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import customNav from "../../components/custom-nav.vue";
	import {
		ref,
		getCurrentInstance,
		reactive
	} from "vue";
	const {
		proxy
	} = getCurrentInstance();
	import {
		onLoad
	} from "@dcloudio/uni-app";
	const title = ref("");
	const id = ref("");
	const details = ref({});
	const toView = ref("");

	function handleNext() {
		uni.navigateTo({
			url: `/pages/serve/serveApplyNew?id=${id.value}`,
		});
		return;
		if (id.value == 1) {
			uni.navigateTo({
				url: `/pages/serve/peopleApply/peopleApply`,
			});
		} else if (id.value == 2) {
			uni.navigateTo({
				url: `/pages/serve/serveApply`,
			});
		} else if (id.value == 3) {
			uni.navigateTo({
				url: `/pages/serve/companyApply/companyApply`,
			});
		} else if (id.value == 4) {
			uni.navigateTo({
				url: `/pages/serve/applystartBusiness/applystartBusiness`,
			});
		}
	}
	onLoad((e) => {
		id.value = e.id;
		getDetails();
	});
	// 获取项目详情
	function getDetails() {
		proxy
			.$request({
				url: "api/Service/getServiceDetail",
				header: "application/x-www-form-urlencoded",
				data: {
					id: id.value
				},
			})
			.then((res) => {
				details.value = res.data;
				toView.value = 'xmjs'+res.data.content[0].id;
			});
	}

	function scrollToAnchor(ids) {
		toView.value = ids;
	}

	function onShareAppMessage(res) {
		var insg = uni.getStorageSync("userinfo");
		if (res.from === "button") {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: "项目详情", //分享的名称
			path: "/pages/index/index?sourceUserId=" + insg.id, // 点击链接进入的页面
			mpId: "wxd84a409b5e9d720a", //此处配置微信小程序的AppId
		};
	}
</script>

<style lang="scss" scoped>
	.serve-detail-wrapper {
		background: #f8f8f8;

		.serv-det-header {
			image {
				height: 416rpx;
				width: 100%;
			}
		}

		.cycle {
			display: flex;
			background: #fff;
			padding: 20rpx 30rpx;
			box-sizing: border-box;

			.processing {
				text-align: center;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				border-right: 1px #f8f8f8 solid;
				flex: 1;

				.time {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 10rpx;
				}
			}
		}

		.tab {
			display: flex;
			padding: 24rpx 20rpx;
			box-sizing: border-box;
			background: #fff;
			margin-top: 20rpx;

			.name {
				flex: 1;
				color: #666666;
				font-size: 28rpx;
				text-align: center;
			}

			.active {
				flex: 1;
				text-align: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #02109c;
			}
		}

		.serv-content {
			position: relative;
			// top: 50rpx;
			margin-top: 20rpx;
			padding: 0 32rpx;
			
			.serve-item {
				background: #fff;
				margin-bottom: 12rpx;
				border-radius: 20rpx;
				padding: 32rpx;

				.serve-item-header {
					margin-bottom: 20rpx;

					.head-b {
						display: inline-block;
						width: 12rpx;
						height: 24rpx;
						background: #02109c;
					}

					.item-tit {
						color: #333333;
						font-weight: bold;
						font-size: 32rpx;
						margin-left: 16rpx;
					}
				}
			}

		}

		.serve-detail-info {
			margin-top: 20rpx;
			padding: 0 32rpx;

			.detail-info-list {

				text {
					display: block;
					margin: 8rpx 0;
				}
				.detail-val {
					color: #333;
					margin-right: 30rpx;
					font-size: 28rpx;
				}

				.detail-label {
					font-size: 26rpx;
					color: #999
				}

				.serve-item {
					background: #fff;
					margin-bottom: 12rpx;
					border-radius: 20rpx;
					padding: 32rpx;

					.item-tit {
						color: #000000;
						font-weight: bold;
						font-size: 32rpx;
						margin-bottom: 14rpx;
					}
					.price-num-box{
						margin-bottom: 14rpx;
						color: #999;
						.price-box{
							font-size: 26rpx;
							.price{
								color: #ff7139;
								font-size: 38rpx;
								font-weight: bold;
							}
							.pro{
								margin-left: 7rpx;
							}
						}
						.num-box{
							font-size: 24rpx;
							.person-avatar{
								.avatar{
									width: 40rpx;
									height: 40rpx;
									border-radius: 50%;
									border:2rpx solid #fff;
									z-index: 1;
								}
								.avatar1{
									margin-right: -20rpx;
									z-index: 2;
								}
								.avatar2{
									margin-left: -20rpx;
									z-index: 0;
								}
								.pro{
									margin-left: 7rpx;
								}
							}
						}
					}
				}
			}
		}

	}
	.apply-btn-wrapper {
		position: fixed;
		bottom: 0;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 140rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	
		.share {
			width: 200rpx;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			border: 2rpx solid #02109c;
			font-size: 32rpx;
			color: #02109c;
	
			button {
				background: none !important;
				border: none !important;
				color: #02109c;
			}
	
			button[plain] {
				border: 0;
			}
		}
	
		.apply-btn {
			margin: 0 auto;
			height: 96rpx;
			background: linear-gradient(128deg, #ff9839 0%, #ff7139 100%);
			border-radius: 200rpx;
			width: 466rpx;
			text-align: center;
			font-size: 32rpx;
			color: #fff;
			line-height: 96rpx;
		}
	}
</style>